<template>
    <view>
        <up-index-list>
            <template v-for="(item, key, index) in carData">
                <up-index-item>
                    <up-index-anchor :text="key"></up-index-anchor>
                    <view class="flex items-center p-[15rpx]" v-for="(cell, i) in item" :key="cell?.brand_name"
                        @click="push(`/pages_qc/wanttobuy/seriesList?id=${item.id}`)">
                        <image :src="cell?.brand_logo" class="w-[75rpx] rounded-[50%] h-[75rpx]"></image>
                        <text class="ml-[20rpx]">{{ cell?.brand_name }}</text>
                    </view>
                </up-index-item>
            </template>
        </up-index-list>
    </view>
</template>
<script setup>
import { ref, computed, } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { uploadImage } from '@/api/app';
import { carList } from '@/api/whoable';
// 跳转
const push = (path) => {
    uni.navigateTo({
        url: path
    });
};
const carData = ref({});
const indexList = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])
onLoad(async (options) => {
   
    const { msg } = await carList({
        brandid:options?.id
    });
    const data = JSON.parse(msg);
    console.log(data)
    // if (typeof msg == 'string' && msg.length > 0) {
    //     const data = JSON.parse(msg);
    //     if (Array.isArray(data?.result)) {
    //         const arr = {};
    //         data?.result.forEach(item => {
    //             if (item.first_letter) {
    //                 if (arr[item.first_letter]) {
    //                     arr[item.first_letter].push(item)
    //                 } else {
    //                     arr[item.first_letter] = [item]
    //                 }
    //             }
    //         });
    //         console.log(arr);
    //         carData.value = arr;
    //     }
    // }
})
</script>
<style lang="scss" scoped>
:deep(.u-index-list__letter) {
    top: 600rpx !important;
}
</style>